<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>仓库管理系统</title>
    <script src="/vanilla-cream-css/js/libs/jquery-1.10.0.js"></script>
    <script src="/vanilla-cream-css/js/libs/bootstrap.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link href="/vanilla-cream-css/css/bootstrap.css" rel="stylesheet"/>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <script>
        $(function () {
           $("#content").css("display","none");
           send();
           $("#prePage").click(pre);
           $("#nextPage").click(next);
           $("#btn_submit").click(editBtnClick);
           $("#addBtn").click(addBtnClick);
           clearAddProductModel();
           $("#addProduct_btn_submit").click(addProductSubmit);
        });


        function clearAddProductModel() {
            $('#addProductModel').on('hide.bs.modal', function () {
                $("#addProductId").val('');
                $("#addProductTyeId").val('');
                $("#addProductPrice").val('');
                $("#addProductGuaranteeTime").val('');
                $("#addProductName").val('');
            })
        }

        function addProduct() {
            $("#addProductModel").modal();
        }

        function editCheck(id,name,price,guaranteeTime,typeId) {
            return !(id===null||id===""||name === null || name === "" || price === null || price === "" || guaranteeTime === null || guaranteeTime === "" || typeId === null || typeId === "");
        }

        function addProductSubmit() {
            var idItem=$("#addProductId");
            var nameItem=$("#addProductName");
            var priceItem=$("#addProductPrice");
            var guaranteeTimeItem=$("#addProductGuaranteeTime");
            var typeIdItem=$("#addProductTyeId");
            var id = idItem.val();
            var name = nameItem.val();
            var price = priceItem.val();
            var guaranteeTime = guaranteeTimeItem.val();
            var typeId = typeIdItem.val();
            if(!editCheck(id,name,price,guaranteeTime,typeId)){
                info("每一项都不能为空");
                return false;
            }
            var data={
                "id":id,
                "name":name,
                "price":price,
                "guaranteeTime":guaranteeTime,
                "typeId":typeId

            };
            $.ajax({
                url:"addProduct",
                type:"post",
                contentType:"application/json;charset=UTF-8",
                data:JSON.stringify(data),
                dataType:"json",
                success:addCallBack,
                error:callBackError
            });
        }


        var size=5;
        var start=1;
        var nowPage;
        var pageCount=1;

        function send() {
            if(start>pageCount||start<1){
                return false;
            }
            clearTable();
            $.ajax({
                url:"selectAll?start="+start+"&size="+size,
                type:"get",
                success: callBack,
                error:callBackError
            });
        }
        function clearTable() {
            var tb = document.getElementById("table");
            var rowNum=tb.rows.length;
            for (var i=1;i<rowNum;i++)
            {
                tb.deleteRow(i);
                rowNum=rowNum-1;
                i=i-1;
            }
        }

        function info(content) {
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    title: '提示信息',
                    content: content
                });
            });
        }

        function callBackError() {
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    title: '提示信息',
                    content: "系统异常，请联系管理员"
                });
            });
        }

        function callBack(data) {
            console.log(data);
            if(data.flag===false){
                info(data.message);
            } else {
                pageCount=data.data.pages;
                nowPage=data.data.pageNum;
                showPage();
                var list=data.data.list;
                for (var i=0;i<list.length;i++){
                    addRow(list[i]);
                }
            }
        }

        function addRow(item) {
            var table = document.getElementById("tbody");
            var row = table.insertRow(table.rows.length);
            var cell0=row.insertCell(0);
            var cell1=row.insertCell(1);
            var cell2=row.insertCell(2);
            cell0.innerHTML=item.id;
            cell1.innerHTML=item.name;
            var typeId=item.id;
            cell2.innerHTML="<div class=\"layui-btn-group\"><button data-id=\"'"+typeId+"'\" onclick='edit(this)' class=\"layui-btn layui-btn-primary layui-btn-sm\">" +
                "<i class=\"layui-icon\">&#xe642;</i>修改</button><button  data-id=\"'"+typeId+"'\" onclick='del(this)' class=\"layui-btn layui-btn-primary layui-btn-sm\">" +
                "<i class=\"layui-icon\">&#xe640;</i>删除</button></div>";
        }

        function edit(btn) {
            var id = btn.getAttribute("data-id");
            tempId=id.substring(1,id.length-1);
            $('#myModal').modal();
        }

        function editBtnClick() {
            var inputItem=$("#input");
            var input = inputItem.val();
            if(input===null||input===""){
                info("名称不能为空");
                return false;
            }
            inputItem.val("");
            var data={
                "id":tempId,
                "name":input
            };
            $.ajax({
                url:"updateType",
                type:"put",
                contentType:"application/json;charset=UTF-8",
                data:JSON.stringify(data),
                dataType:"json",
                success:updateCallBack
            });
        }

        function del(btn) {
            var id = btn.getAttribute("data-id");
            id=id.substring(1,id.length-1);
            $.ajax({
               url:"deleteType/"+id,
               type:"delete",
               success:updateCallBack,
               error:info
            });
        }

        function updateCallBack(data) {
            info(data.message);
            if(data.flag===true){
                clearTable();
                send();
            }
        }

        function pre() {
            start--;
            var flag=send();
            if(flag===false){
                start++;
            }
        }

        function next() {
            start++;
            var flag=send();
            if(flag===false){
                start--;
            }
        }

        function showPage() {
            $("#content").css("display","block");
            $("#now").html(nowPage);
            $("#all").html(pageCount);
        }

        function addBtnClick() {
            var idItem=$("#addId");
            var nameItem=$("#addName");
            var id = idItem.val();
            var name = nameItem.val();
            if(name===null||name===""||id===null||id===""){
                info("编号和名称不能为空");
                return false;
            }
            idItem.val("");
            nameItem.val("");
            var data={
                "id":id,
                "name":name
            };
            console.log(data)
            $.ajax({
                url:"addType",
                type:"post",
                contentType:"application/json;charset=UTF-8",
                data:JSON.stringify(data),
                dataType:"json",
                success:addCallBack,
                error:callBackError
            });
        }

        function addType() {
            $("#addModel").modal();
        }

        function addCallBack(data) {
            info(data.message);
        }
    </script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">产品管理</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="/product/index">产品管理</a></li>
            <li class="layui-nav-item"><a href="">库存管理</a></li>
            <li class="layui-nav-item"><a href="/query/">查询统计</a></li>
            <li class="layui-nav-item"><a href="/admin/user/proPage">个人信息</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item"><a href="/product/searchType">查询种类</a></li>
                <li class="layui-nav-item"><a href="/product/searchProduct">查询产品</a></li>
                <li class="layui-nav-item"><a href="#" onclick="addType()">添加种类</a></li>
                <li class="layui-nav-item"><a href="#" onclick="addProduct()">添加产品</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="padding: 15px;">
            <br/>
            <h2 style="font-family:华文行楷,serif;color:#54AAF5; text-align: center">产品种类</h2>
            <br/>
            <br/><br/>
            <div id="content">
                <table class="layui-table" style="width: 600px;margin: auto" id="table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
                <br/><br/>
                <nav aria-label="...">
                    <ul class="pager">
                        共&nbsp;<span id="all">-- </span>&nbsp;页&nbsp;
                        <li><a href="#" id="prePage">上一页</a></li>&nbsp;
                        <li><a href="#" id="nextPage">下一页</a></li>&nbsp;
                        当前第&nbsp;<span id="now">--</span>&nbsp;页
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改名称</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" id="input" name="txt_departmentname" class="form-control" placeholder="请输入种类名称">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消</button>
                    <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addProductModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加产品</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" id="addProductId"  class="form-control" placeholder="请输入产品编号">
                    </div>
                    <div class="form-group">
                        <input type="text" id="addProductName"  class="form-control" placeholder="请输入产品名称">
                    </div>
                    <div class="form-group">
                        <input type="text" id="addProductPrice"  class="form-control" placeholder="请输入产品价格">
                    </div>
                    <div class="form-group">
                        <input type="text" id="addProductGuaranteeTime" class="form-control" placeholder="请输入产品保质期(单位:天)">
                    </div>
                    <div class="form-group">
                        <input type="text" id="addProductTyeId" class="form-control" placeholder="请输入产品类别编号">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消</button>
                    <button type="button" id="addProduct_btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加种类</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" id="addId"  class="form-control" placeholder="请输入种类编号">
                    </div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" id="addName" class="form-control" placeholder="请输入种类名称">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消</button>
                    <button type="button" id="addBtn" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-footer">
    </div>
</div>

</body>
</html>